@charset "utf-8";
@media all and (max-width: 1367px) {
  a {
    text-decoration: none;
    color: #444444;
  }
  ul li {
    list-style: none;
    margin: 0 0;
    padding: 0 0;
  }
  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: url("../img/fm_bImage.png") no-repeat;
    background-size: cover;
  }
  .checked {
    background: #191c1f;
  }
  .fm_music {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 220px;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    margin-left: -300px;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    padding: 30px 30px 30px 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  .fm_music h2 {
    margin: 0;
    color: white;
    font-weight: 400;
    font-size: 24px;
  }
  .fm_music .fm_about a {
    font-size: 14px;
    color: white;
    margin-top: 12px;
    margin-bottom: 12px;
    display: block;
  }
  .fm_music .fm_about p {
    color: white;
    font-size: 14px;
    margin: 0;
  }
  .fm_music .fm_btn a {
    float: right;
    display: inline-block;
    margin-left: 10px;
    color: white;
  }
  .fm_music .fm_btn .btn_commentA {
    padding-left: 25px;
    background: url("../img/fm_pinglun.png") no-repeat;
  }
  .fm_music .fm_btn .btn_commentA:hover {
    opacity: 0.75;
  }
  .fm_music .fm_btn .btn_favoriteA {
    padding-left: 25px;
    background: url("../img/fm_love.png") no-repeat;
  }
  .fm_music .fm_btn .btn_favoriteA:hover {
    opacity: 0.75;
    background: url("../img/fm_redLove.png") no-repeat;
  }
  .fm_sidebar {
    width: 450px;
    height: 100vh;
    position: fixed;
    right: -350px;
    z-index: 100;
  }
  .fm_right {
    width: 100px;
    height: 100vh;
    background: #222629;
    float: right;
    box-shadow: -5px 0px 1px rgba(0, 0, 0, 0.1);
  }
  .fm_right > a {
    color: white;
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 12px 0 12px 0;
  }
  .fm_right a:hover {
    color: rgba(255, 255, 255, 0.5);
  }
  .p_img img:hover {
    opacity: 0.75;
  }
  .p_photo {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    padding-top: 40px;
  }
  .p_photo img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
  }
  .p_photo img:hover {
    opacity: 0.75;
  }
  .p_name {
    text-align: center;
    display: block;
    color: white;
    font-size: 12px;
    margin: 8px 0 40px 0;
  }
  .fm_hide {
    width: 350px;
    height: 100vh;
    float: right;
    background: white;
  }
  .fm_comment {
    width: 100vw;
    height: 40px;
    position: fixed;
    z-index: 0;
    bottom: 0;
    background: linear-gradient(to left, rgba(34, 38, 41, 0), rgba(0, 0, 0, 0.85));
  }
  .fc_img {
    position: fixed;
    left: 20px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    border-radius: 5px;
  }
  .fc_img:hover {
    opacity: 1;
  }
  .fc_newCom {
    font-size: 16px;
    color: white;
    position: fixed;
    left: 70px;
    bottom: 40px;
    opacity: 1;
  }
  .fc_newCom:hover {
    opacity: 0.6;
  }
  .fc_comment {
    font-size: 14px;
    color: white;
    position: fixed;
    left: 70px;
    bottom: 22px;
  }
  .fc_comment:hover {
    opacity: 0.6;
  }
  .fm_logo {
    background: url("../img/fm_logo.png") no-repeat;
    position: fixed;
    left: 30px;
    top: 30px;
    width: 107px;
    height: 50px;
  }
  .fm_logo:hover {
    opacity: 0.75;
  }
  .fm_mood {
    display: none;
    overflow-y: auto;
    height: 100vh;
  }
  .fm_mood .fm_happy {
    background: url("../img/fm_fan.png") no-repeat center center;
    padding-top: 120px;
    padding-bottom: 10px;
    margin: 10px 0 10px 13px;
    display: inline-block;
    width: 44%;
    height: 20px;
    text-align: center;
    font-size: 14px;
    color: #444444;
    border-radius: 5px;
  }
  .fm_mood .fm_happy:hover {
    background: url("../img/fm_fan1.png") no-repeat center center #846bd5;
    color: white;
  }
  .fm_scene {
    display: none;
    overflow-y: auto;
    height: 100vh;
  }
  .fm_scene .fm_sleep {
    background: url("../img/fm_sleep.png") no-repeat center center;
    padding-top: 120px;
    padding-bottom: 10px;
    margin: 10px 0 10px 13px;
    display: inline-block;
    width: 44%;
    height: 20px;
    text-align: center;
    font-size: 14px;
    color: #444444;
    border-radius: 5px;
  }
  .fm_scene .fm_sleep:hover {
    background: url("../img/fm_sleep1.png") no-repeat center center #846bd5;
    color: white;
  }
  .fm_dJ {
    display: none;
    overflow-y: auto;
    height: 100vh;
    margin-top: 10px;
  }
  .fm_dJ a {
    display: block;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 60px;
    color: #ababab;
  }
  .fm_dJ ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .fm_dJ ul li {
    display: inline-block;
    text-align: center;
    height: 124px;
  }
  .fm_dJ ul li a {
    display: block;
    margin-left: 35px;
    margin-top: 30px;
    color: black;
    font-size: 14px;
  }
  .fm_dJ ul li a:hover {
    opacity: 0.8;
  }
  .fm_dJ ul li img {
    width: 66px;
    height: 66px;
    display: block;
  }
  .fm_recommend {
    display: none;
    overflow-y: auto;
    height: 100vh;
    padding-top: 20px;
  }
  .fm_recommend .re_adMore {
    display: block;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 60px;
    color: #ababab;
  }
  .fm_recommend .re_tit {
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border-bottom: black 1px solid;
    width: 300px;
    height: 30px;
    padding: 0;
  }
  .fm_recommend .re_title {
    width: 68px;
    height: 28px;
    display: inline-block;
  }
  .fm_recommend .re_title .re_new {
    background: black;
    color: white;
  }
  .fm_recommend .re_title .re_hot {
    color: black;
  }
  .fm_recommend .re_title a {
    text-align: center;
    display: block;
    padding-top: 4px;
    padding-bottom: 5px;
    font-size: 16px;
  }
  .fm_recommend .re_content {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    width: 300px;
    margin: 0 auto;
  }
  .fm_recommend .re_content li {
    margin-top: 30px;
  }
  .fm_recommend .re_content li a {
    float: left;
  }
  .fm_recommend .re_content li a:hover {
    opacity: 0.75;
  }
  .fm_recommend .re_content .re_rightCon {
    padding-left: 90px;
  }
  .fm_recommend .re_content .re_rightCon a {
    margin-top: 1px;
    color: #222629;
  }
  .fm_recommend .re_content .re_rightCon p {
    margin: 0;
    padding-top: 5px;
    color: #ababab;
    font-size: 14px;
  }
  .fm_recommend .fm_hotCommend {
    display: none;
  }
  .fm_happyDetails {
    display: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    height: 100vh;
  }
  .fm_happyDetails .re_adMore {
    display: block;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ababab;
  }
  .fm_happyDetails .fm_happyTit {
    line-height: 50px;
    height: 50px;
    background: url("../img/fm_fa.png") 20px 50% no-repeat #86c1dc;
    background-size: 32px 32px;
  }
  .fm_happyDetails .fm_happyTit span {
    margin-left: 60px;
    color: white;
    font-size: 14px;
  }
  .fm_happyDetails .fm_happyTit a {
    position: absolute;
    color: white;
    right: 24px;
    font-size: 14px;
  }
  .fm_happyDetails .re_content {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    width: 300px;
    margin: 0 auto;
  }
  .fm_happyDetails .re_content li {
    margin-top: 30px;
  }
  .fm_happyDetails .re_content li a {
    float: left;
  }
  .fm_happyDetails .re_content li a:hover {
    opacity: 0.75;
  }
  .fm_happyDetails .re_content .re_rightCon {
    padding-left: 90px;
  }
  .fm_happyDetails .re_content .re_rightCon a {
    margin-top: 1px;
    color: #222629;
    font-size: 14px;
  }
  .fm_happyDetails .re_content .re_rightCon p {
    margin: 0;
    padding-top: 5px;
    color: #ababab;
    font-size: 14px;
  }
  .fm_scenarioDetails {
    display: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    height: 100vh;
  }
  .fm_scenarioDetails .re_adMore {
    display: block;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ababab;
  }
  .fm_scenarioDetails .fm_scenarioTit {
    line-height: 50px;
    height: 50px;
    background: url("../img/fm_sl.png") 20px 50% no-repeat #86c1dc;
    background-size: 32px 32px;
  }
  .fm_scenarioDetails .fm_scenarioTit span {
    margin-left: 60px;
    color: white;
    font-size: 14px;
  }
  .fm_scenarioDetails .fm_scenarioTit a {
    position: absolute;
    color: white;
    right: 24px;
    font-size: 14px;
  }
  .fm_scenarioDetails .re_content {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    width: 300px;
    margin: 0 auto;
  }
  .fm_scenarioDetails .re_content li {
    margin-top: 30px;
  }
  .fm_scenarioDetails .re_content li a {
    float: left;
  }
  .fm_scenarioDetails .re_content li a:hover {
    opacity: 0.75;
  }
  .fm_scenarioDetails .re_content .re_rightCon {
    padding-left: 90px;
  }
  .fm_scenarioDetails .re_content .re_rightCon a {
    margin-top: 1px;
    color: #222629;
    font-size: 14px;
  }
  .fm_scenarioDetails .re_content .re_rightCon p {
    margin: 0;
    padding-top: 5px;
    color: #ababab;
    font-size: 14px;
  }
  .fm_host {
    display: none;
    overflow-y: auto;
    height: 100vh;
  }
  .fm_host .re_adMore {
    display: block;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ababab;
  }
  .fm_host .fm_hostP {
    position: relative;
    text-align: center;
    height: 170px;
    background: #191c1f;
  }
  .fm_host .fm_hostP a {
    font-size: 14px;
    display: block;
    color: white;
  }
  .fm_host .fm_hostP a img {
    margin-top: 25px;
    margin-bottom: 5px;
    border-radius: 50%;
  }
  .fm_host .fm_hostP a:hover {
    opacity: 0.75;
  }
  .fm_host .fm_hostP .fm_return {
    display: block;
    position: absolute;
    right: 24px;
    top: 12px;
    font-size: 14px;
  }
  .fm_host .hs_show {
    margin: 0;
    padding: 0;
    height: 48px;
    background: #191c1f;
  }
  .fm_host .hs_show li {
    text-align: center;
    line-height: 48px;
    width: 48%;
    display: inline-block;
  }
  .fm_host .hs_show li a {
    display: block;
    color: white;
    font-size: 14px;
  }
  .fm_host .hs_show li a:hover {
    opacity: 0.75;
  }
  .fm_host .hs_show .hs_ace {
    background: url("../img/fm_acer.png") no-repeat center;
    background-position-y: 39px;
  }
  .fm_host .re_content {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    width: 300px;
    margin: 0 auto;
  }
  .fm_host .re_content li {
    margin-top: 30px;
  }
  .fm_host .re_content li a {
    float: left;
  }
  .fm_host .re_content li a:hover {
    opacity: 0.75;
  }
  .fm_host .re_content .re_rightCon {
    padding-left: 90px;
  }
  .fm_host .re_content .re_rightCon a {
    margin-top: 1px;
    color: #222629;
  }
  .fm_host .re_content .re_rightCon p {
    margin: 0;
    padding-top: 5px;
    color: #ababab;
    font-size: 14px;
  }
  .fm_host .re_Message {
    padding-left: 25px;
    padding-right: 25px;
    display: none;
    margin: 0 auto;
  }
  .fm_host .re_Message form {
    display: block;
    margin-bottom: 40px;
  }
  .fm_host .re_Message form textarea {
    padding: 5px 8px;
    margin-top: 20px;
    margin-bottom: 8px;
    resize: none;
    border-radius: 3px;
    width: 94%;
    height: 60px;
  }
  .fm_host .re_Message form input {
    height: 30px;
    width: 50px;
    background: black;
    color: white;
    font-size: 12px;
    border: 0;
    padding: 0;
    float: right;
  }
  .fm_host .re_Message ul {
    padding: 0;
  }
  .fm_host .re_Message ul li {
    display: inline-block;
    margin-top: 20px;
  }
  .fm_host .re_Message ul li a {
    float: left;
  }
  .fm_host .re_Message ul li a img {
    width: 60px;
    height: 60px;
  }
  .fm_host .re_Message ul li a img:hover {
    opacity: 0.75;
  }
  .fm_host .re_Message ul li div {
    width: 74%;
    font-size: 14px;
    float: right;
    margin-bottom: 20px;
  }
  .fm_host .re_Message ul li div p {
    margin: 0;
    margin-bottom: 5px;
  }
  .fm_host .re_Message ul li div span {
    color: #787a7c;
    font-size: 12px;
  }
  .fm_host .re_Message ul li div .comment_reply {
    margin-right: 10px;
    float: right;
  }
  .fm_host .re_Message ul li div a {
    color: #336699;
  }
  .fm_host .re_Message ul li div a:hover {
    opacity: 0.75;
  }
  .fm_search {
    display: none;
    overflow-y: auto;
    height: 100vh;
  }
  .fm_search .re_adMore {
    display: block;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ababab;
  }
  .fm_search .sc_search {
    margin-top: 30px;
  }
  .fm_search .sc_search form {
    width: 272px;
    margin: 0 auto;
    height: 38px;
    position: relative;
    text-align: center;
  }
  .fm_search .sc_search .sc_btn {
    padding: 0;
    border: 0;
    width: 48px;
    height: 33px;
    background: url("../img/fm_search.png") no-repeat #000000 center center;
    float: right;
  }
  .fm_search .sc_search input {
    width: 210px;
    height: 19.2px;
    padding: 5px 5px;
  }
  .fm_search .sc_content {
    display: none;
  }
  .fm_search .sc_content span {
    margin-left: 40px;
    font-size: 14px;
  }
  .fm_search .sc_content .re_content {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    width: 300px;
    margin: 0 auto;
  }
  .fm_search .sc_content .re_content li {
    margin-left: 16px;
    margin-top: 30px;
  }
  .fm_search .sc_content .re_content li a {
    float: left;
  }
  .fm_search .sc_content .re_content li a:hover {
    opacity: 0.75;
  }
  .fm_search .sc_content .re_content .re_rightCon {
    padding-left: 90px;
  }
  .fm_search .sc_content .re_content .re_rightCon a {
    margin-top: 1px;
    color: #222629;
  }
  .fm_search .sc_content .re_content .re_rightCon p {
    margin: 0;
    padding-top: 5px;
    color: #ababab;
    font-size: 14px;
  }
  .clickFmComments {
    display: none;
    width: 400px;
    padding-left: 25px;
    padding-right: 25px;
    margin: 0 auto;
    position: fixed;
    right: -450px;
    background: white;
    z-index: 100;
    overflow-y: auto;
    height: 100vh;
  }
  .clickFmComments .re_adMore {
    display: block;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 60px;
    color: #ababab;
  }
  .clickFmComments form {
    width: 400px;
    text-align: center;
    display: block;
    margin-bottom: 40px;
  }
  .clickFmComments form textarea {
    padding: 5px 8px;
    margin-top: 20px;
    margin-bottom: 8px;
    resize: none;
    border-radius: 3px;
    width: 382px;
    height: 60px;
  }
  .clickFmComments form input {
    height: 30px;
    width: 50px;
    background: black;
    color: white;
    font-size: 12px;
    border: 0;
    padding: 0;
    float: right;
  }
  .clickFmComments ul {
    padding: 0;
  }
  .clickFmComments ul li {
    width: 400px;
    display: inline-block;
    margin-top: 20px;
  }
  .clickFmComments ul li a {
    float: left;
  }
  .clickFmComments ul li a img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .clickFmComments ul li a img:hover {
    opacity: 0.75;
  }
  .clickFmComments ul li div {
    width: 320px;
    font-size: 14px;
    float: right;
    margin-bottom: 20px;
  }
  .clickFmComments ul li div p {
    margin: 0;
    margin-bottom: 5px;
  }
  .clickFmComments ul li div span {
    color: #787a7c;
    font-size: 12px;
  }
  .clickFmComments ul li div a {
    color: #336699;
  }
  .clickFmComments ul li div a:hover {
    opacity: 0.75;
  }
}
